<template>
  <div :visible.sync="isShow">
    <div class="bg-mark" />
    <div class="bigImg-body">
      <img style="max-width: 90%; max-height: 100%;" :src="keyValue ? imgList[indexShow][keyValue] : imgList[indexShow]" alt="" @dblclick="close">
      <i class="el-icon-close" @click="close" />
      <i v-if="imgList.length > 1 && (loop || !loop && indexShow !== 0)" class="el-icon-arrow-left" @click="showLast" />
      <i v-if="imgList.length > 1 && (loop || !loop && indexShow !== imgList.length - 1)" class="el-icon-arrow-right" @click="showNext" />
    </div>
  </div>

</template>

<script>
export default {
  name: 'BigImg',
  props: ['showPanel', 'index', 'imgList', 'keyValue', 'loop'],
  data() {
    return {
      isShow: this.show,
      indexShow: this.index || 0
    }
  },
  mounted: function() {
  },
  methods: {
    showLast() {
      if (this.indexShow === 0) {
        this.indexShow = this.imgList.length - 1
      } else {
        this.indexShow = this.indexShow - 1
      }
    },
    showNext() {
      if (this.indexShow === this.imgList.length - 1) {
        this.indexShow = 0
      } else {
        this.indexShow = this.indexShow + 1
      }
    },
    close(val) {
      this.isShow = false
      this.$emit('update:showPanel', this.isShow)
    }
  }
}
</script>

<style lang="scss" scoped>
  .bigImg-body{
    position: fixed;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
  }
  .bg-mark{
    position: fixed;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.7;
    z-index: 1999;
  }
  .el-icon-close{
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    color: #ffffff;
    cursor:pointer;
    z-index: 2001;
  }
  .el-icon-arrow-right{
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -20px;
    font-size: 40px;
    color: #ffffff;
    cursor:pointer;
    z-index: 2001;
  }
  .el-icon-arrow-left{
    position: fixed;
    left: 20px;
    top: 50%;
    margin-top: -20px;
    font-size: 40px;
    color: #ffffff;
    cursor:pointer;
    z-index: 2001;
  }
  .bigImg-body img{
    max-width: 90%;
    max-height: 100%;
    border: 5px solid #ffffff;
    box-sizing: border-box;
  }
</style>
